<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { getCheckoutPage, createCheckout } from "/@/api/issue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
dayjs.extend(utc);
dayjs.extend(timezone);

defineOptions({
  name: "IssueIndex"
});

const dialogVisible = ref<boolean>(false);
const tableData = ref([]);
const query = reactive({ currentPage: 1, pageSize: 15 });
const total = ref(0);

onMounted(() => {
  getTableData();
});

const formData = reactive({
  name: ""
});

const getTableData = () => {
  getCheckoutPage(query).then((res: any) => {
    tableData.value = res.data.data;
    total.value = res.data.total;
  });
};

const handleSizeChange = val => {
  query.pageSize = val;
  getTableData();
};

const handleCurrentChange = val => {
  query.currentPage = val;
  getTableData();
};

const submit = () => {
  if (formData.name === "") {
    return ElMessage({
      type: "warning",
      message: "请输入名称"
    });
  } else {
    createCheckout(formData).then(() => {
      ElMessage({
        type: "success",
        message: "创建成功"
      });
      dialogVisible.value = false;
      getTableData();
    });
  }
};
</script>

<template>
  <div class="Issue-warp">
    <el-card>
      <el-button type="primary" @click="dialogVisible = true"
        >创建出库方式</el-button
      >
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="name" label="名称" />
        <el-table-column label="创建时间(加利福尼亚)">
          <template #default="{ row }">
            {{
              row.created_at
                ? dayjs(row.created_at * 1000)
                    .tz("America/Los_Angeles")
                    .format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间(加利福尼亚)">
          <template #default="{ row }">
            {{
              row.updated_at
                ? dayjs(row.updated_at * 1000)
                    .tz("America/Los_Angeles")
                    .format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}
          </template>
        </el-table-column>
      </el-table>

      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
          v-model:currentPage="query.currentPage"
          v-model:page-size="query.pageSize"
          :page-sizes="[5, 10, 15, 20, 30]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <el-dialog v-model="dialogVisible" title="创建出库方式" width="20%">
      <span>
        <el-form :model="formData" label-width="auto">
          <el-form-item label="名称:">
            <el-input v-model="formData.name" />
          </el-form-item>
        </el-form>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
